<template>
    <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hotCities="hotCities"  :letter="letter"></city-list>
    <city-alphabet :cities="cities" @change="receiveLetter"></city-alphabet>
    </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import CitySearch from "./components/Search";

export default {
  name: 'City',
  components: {
      CitySearch,
    CityHeader,
    CityList,
    CityAlphabet
  },
    data () {
      return {
        cities: {},
        hotCities: [],
        letter:''
      }
    },
    methods : {
      getCityInfo () {
          axios.get('/api/city.json')
              .then(this.getCityInfoSucc)
      },
        getCityInfoSucc (res){
           res = res.data
            if(res.data&& res.ret){
                const data=res.data
                this.hotCities=data.hotCities
                this.cities=data.cities

            }
        },
        receiveLetter (letter) {
            this.letter = letter
        }
    },
   mounted() {
      this.getCityInfo()
   }


}
</script>

<style lang="stylus" scoped>

</style>
